import { Component, Input, OnInit, OnChanges } from '@angular/core';

interface NodeLabel {
  name: string;
  category: number;
  symbolSize: number;
  itemStyle: {};
}

interface LinkLabel {
  source: string;
  target: string;
  name: string;
  label: {};
}

interface DataLabel {
  nodes: NodeLabel[];
  links: LinkLabel[];
}

@Component({
  selector: 'app-knowledge-chart',
  templateUrl: './knowledge-chart.component.html',
  styleUrls: ['./knowledge-chart.component.scss']
})
export class KnowledgeChartComponent implements OnChanges {
  @Input() title = ''; // 图标标题
  @Input() data: DataLabel; // 显示数据
  @Input() indicator: []; // 数据上限
  @Input() legend: []; // 下标
  @Input() givenHeight: string = '400px';
  options = {};
  theme: string;

  constructor() { }

  getHeight() {
    return this.givenHeight;
  }

  ngOnChanges(): void {
    // console.log(this.data);
    const data = this.data;
    const color1 = '#006acc';
    const categories = [{
      name: this.title,
      itemStyle: {
        color: color1
      }
    }];

    this.options = {
      legend: [{
        data: categories.map(x => x.name),
      }],
      series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 58,
        draggable: true,
        roam: true,
        focusNodeAdjacency: true,
        categories,
        edgeSymbol: ['', 'arrow'],
        // edgeSymbolSize: [80, 10],
        edgeLabel: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 35
            },
            formatter(x) {
              return x.data.name;
            }
          }
        },
        label: {
          show: true,
          fontSize: 25
        },
        force: {
          repulsion: 600,
          edgeLength: 200
        },
        data: data.nodes,
        links: data.links
      }]
    };
  }
}
